<!--
 *                   ___====-_  _-====___
 *             _--^^^#####//      \\#####^^^--_
 *          _-^##########// (    ) \\##########^-_
 *         -############//  |\^^/|  \\############-
 *       _/############//   (@::@)   \############\_
 *      /#############((     \\//     ))#############\
 *     -###############\\    (oo)    //###############-
 *    -#################\\  / VV \  //#################-
 *   -###################\\/      \//###################-
 *  _#/|##########/\######(   /\   )######/\##########|\#_
 *  |/ |#/\#/\#/\/  \#/\##\  |  |  /##/\#/  \/\#/\#/\#| \|
 *  `  |/  V  V  `   V  \#\| |  | |/#/  V   '  V  V  \|  '
 *     `   `  `      `   / | |  | | \   '      '  '   '
 *                      (  | |  | |  )
 *                     __\ | |  | | /__
 *                    (vvv(VVV)(VVV)vvv)
 *
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *                神兽保佑            永无BUG
 *
 -->
<template>
  <div class="app">
    <!--顶部栏-->
    <Header></Header>

    <!-- 路由视图 -->
    <transition>
      <router-view v-slot="{ Component }">
        <transition enter-active-class="animate__animated animate__fadeInRight"
                    leave-active-class="animate__animated animate__fadeOutLeft  absolute">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </transition>

    <!-- 导航栏 -->
    <div class="menu">
      <!-- 主页导航按钮 -->
      <div class="menu_item">
        <router-link to="/home">
          <el-icon :size="25">
            <i-ep-House/>
          </el-icon>
          <div>主页</div>
        </router-link>
      </div>
      <!-- 招聘页按钮 -->
      <div class="menu_item">
        <router-link to="/job">
          <el-icon :size="25">
            <i-ep-Search/>
          </el-icon>
          <div>招聘</div>
        </router-link>
      </div>
      <!-- 简历页导航按钮 -->
      <div class="menu_item">
        <router-link to="/vitae">
          <el-icon :size="25">
            <i-ep-Tickets/>
          </el-icon>
          <div>简历</div>
        </router-link>
      </div>
      <!-- “我的”导航按钮 -->
      <div class="menu_item">
        <router-link to="/mine">
          <el-icon :size="26">
            <i-ep-User/>
          </el-icon>
          <div>我的</div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import Header from "@/components/header.vue";

</script>
<style>
#app {
  overflow: hidden;
  /*用于设置元素的内容溢出其边界时如何显示*/
}

/**
//border-top: 1px solid #e0e0e0;在元素的上边缘添加了一个1像素宽的灰色边框
//padding: 10px 0;在元素上下方向上添加了10像素的填充
//bottom: 0; 用于设置元素相对于其父元素的位置。在这个属性中，bottom 表示元素底边距离父元素底边的距离，0 表示元素底边与父元素底边对齐
bottom: 0 会将元素放置在父元素的底部，而 bottom: auto 则会根据父元素的 overflow 属性决定元素的位置
//position: fixed用于将元素固定在页面的固定位置。当页面滚动时，元素不会随着滚动
display: flex; 将元素设置为弹性盒子布局，使子元素可以沿主轴方向排列
 */
.menu {
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  padding: 10px 0;
  border-top: 1px solid #e0e0e0;
  background-color: white;
}

.menu_item {
  width: 25%;
  text-align: center;
}

.menu_item a {
  color: #333;
  text-decoration: none;
}

a.active {
  color: #409eff;
}

.absolute {
  position: absolute;
}


</style>